{extend name="index/public" /}

{block name="content"}
<form class="layui-form" action="" id="searchBox">
    <div class="layui-inline">
        {MyTag:client name="client" /}
    </div>
    <div class="layui-inline">
        <select name="plat" id="plat" lay-filter="plat">
            <option value="">全部（渠道类型）</option>
            <option value="cps">CPS</option>
            <option value="sdk">联运</option>
        </select>
    </div>
    <div class="layui-inline" style="width: 225px;">
        <a href="javascript:;" value="{$today}" class="layui-btn my-btn-sm layui-btn-primary" id="today" style="float: left; border: 1px solid #d2d2d2; margin-right: 4px;">今天</a>
        <input type="text" style="width:165px; float:left;" name="date" value="{$date}" id="date" lay-verify="datetime" placeholder="支付时间" autocomplete="off" class="layui-input layui-disabled">
    </div>
    <div class="layui-inline">
        <select name="type" id="type" lay-filter="type">
            <option value="game_add">游戏新增</option>
            <option value="game_role">游戏创角</option>
            <option value="game_active">游戏活跃</option>
            <option value="pay_number">付费人数</option>
            <option value="pay_money" selected>付费金额</option>
        </select>
    </div>
    <div class="layui-inline">
        <button class="layui-btn searchBtn my-btn my-btn-sm" lay-filter="demo1" lay-submit="">搜索</button>
    </div>
</form>

<div id="container" style="min-width:400px; height: 3500px;"></div>
{/block}

{block name="css"}
{/block}

{block name="js"}
<script src="__STATIC__/hcharts/jquery-3.1.1.min.js"></script>
<script src="__STATIC__/hcharts/code/highcharts.js"></script>
<script src="__STATIC__/hcharts/code/modules/exporting.js"></script>
<script src="__STATIC__/hcharts/code/modules/oldie.js"></script>
<script src="__STATIC__/hcharts/highcharts-zh_CN.js"></script>
<script>
    layui.use(['form', 'laydate', 'table'], function(){
        var $ = layui.$
            ,laydate = layui.laydate
            ,load = null
            ,layer = layui.layer
            ,active = {
                reload: function () {
                    var jsonObj = {
                        "type": $('#type').val()
                        ,"plat": $('#plat').val()
                        ,"date": $('#date').hasClass('layui-disabled') ? $('#today').attr('value') : $('#date').val()
                        ,"game_server": $('#game_server').find('.my-btn').attr('val')
                        ,"game_publish": $('#game_publish').find('.my-btn').attr('val')
                        ,"game_platform": $('#game_platform').find('.my-btn').attr('val')
                        ,"game_client": $('#game_client').find('.my-btn').attr('val')
                    };

                    channelRank(jsonObj);
                }
            };

        $('#layui-loading').hide();

        $('#today').click(function(){
            $(this).css({'borderColor':'#ddd'})
            $('#date').addClass('layui-disabled');
            $(this).removeClass('layui-disabled');
        });

        //日期
        laydate.render({
            elem: '#date'
            ,type: 'date'
            ,range: true
            ,calendar: true
            ,min: '2016-01-01'
            ,max: -1
            ,ready: function(date){
                $('#today').addClass('layui-disabled').css({'borderColor':'#ddd'});
                $('#date').removeClass('layui-disabled');
            }
        });

        $('#searchBox .searchBtn').on('click', function(){
            load = layer.load();
            active['reload'].call(this);
            return false;
        });

        function channelRank(jsonObj){
            $.post('{:url("ChartData/channelRank")}', jsonObj, function(json){
                layer.close(load);
                var chart = Highcharts.chart('container', {
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: ''
                    },
                    xAxis: {
                        categories: json.title,
                        title: {
                            text: null
                        },
                    },
                    yAxis: {
                        min: 0,
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true,
                                allowOverlap: true // 允许数据标签重叠
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: false,
                        borderWidth: 1,
                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                        shadow: true
                    },
                    series: json.all,
                });
            }, 'JSON');
        }

        var jsonObj = {
            "type": $('#type').val()
        };
        channelRank(jsonObj);
    });
</script>
{/block}